import React, { useState } from 'react';
import { Button, Form, Input } from 'antd';
import { PageContainer } from '@ant-design/pro-layout'
import styles from './index.module.less';
import ForgetModal from './ForgetModal';
import store from '@/store';
import { Modal, message } from 'antd';
import SignPad from '@/components/Sign'
import { changeSign } from '@/services/user'

type FieldType = {
    username?: string;
    role: string;
    signature?: string;
};

const App: React.FC = () => {
    const [previewOpen, setPreviewOpen] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleCancel = () => setPreviewOpen(false);
    const [user, userDispatcher] = store.useModel('user');
    const handleSign = () => {
        setPreviewOpen(true);
    }

    const onChangePass = () => {
        setIsModalOpen(true)
    }

    const handleFinish = async (signUrl) => {
        try {
            const res = await changeSign(signUrl);
            if (res.code === 200) {
                message.success('签名设置成功');
                userDispatcher.updateCurrentUser({ ...user.currentUser, signature: signUrl });
                handleCancel()
            }
        } catch (error) {
            message.error('签名设置失败')
        }
    }
    return (
        <PageContainer header={{ title: '个人中心' }}>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600, marginTop: 50 }}
                initialValues={user.currentUser}
            >
                <Form.Item<FieldType>
                    label="姓名"
                    name="username"
                >
                    <Input disabled />
                </Form.Item>
                <Form.Item<FieldType>
                    label="角色"
                    name="role"
                >
                    <Input disabled />
                </Form.Item>

                <Form.Item<FieldType>
                    label="电子签名"
                    name="signature"
                >
                    {
                        user.currentUser.signature ? <>
                            <img src={user.currentUser.signature} alt="" className={styles.img} />
                            <Button onClick={handleSign} className={styles.changeSign} danger>更换签名</Button>
                        </> : <Button onClick={handleSign}>制作签名</Button>
                    }
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" style={{ marginTop: 20 }} onClick={onChangePass}>
                        修改密码
                    </Button>
                </Form.Item>
            </Form>
            <Modal open={previewOpen} footer={null} onCancel={handleCancel} width={600}>
                <SignPad onFinish={handleFinish} />
            </Modal>
            <ForgetModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
        </PageContainer>
    )
}


export default App;